<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工管理</title>
	</head>
	<body>
		<form autocomplete="off">
			请输入组员昵称：
			<input type="text">
			<button type="button">完成添加</button>
		</form>
		<h2>你添加的组员昵称如下：</h2>
		<div class="users"></div>
		<script>
			// 获取标签
			var input = document.querySelector("input")
			var button = document.querySelector("button")
			var users = document.querySelector(".users")
			// 声明一个变量  空数组  存放昵称字符串 
			var list = [] //["a","b","c"]
			//  
			// 输入框获取光标----清空
			input.onfocus = function(){this.value = ""}
			// 点击按钮--添加数据
			button.onclick = function(){
				// 获取输入框的数据
				var inp = input.value;
				// 验证数据：字符要求，不能重复
				if(inp.indexOf(",") != -1 || inp.indexOf("，") != -1){
					alert("不能包含逗号")
				}else if(inp.length==0){
					alert("不能为空昵称")
				}else if(list.indexOf(inp) != -1){
					alert("昵称不能重复")
				}else{
					// 把新员工的名字存储在数组中
					list.push(inp)
					// 以斜体方式显示在页面中
					var inner = users.innerHTML
					users.innerHTML = inner + inp.italics() + "</br>" 
				}
			}
		</script>
	</body>
</html>
